<script setup lang="ts">
import { ref, onMounted } from "vue";
import patientList from "@/mock/patientData"; // 导入真实病人数据
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});

// 计算高血压分级统计数据（只包含1级、2级、3级高血压）
const hypertensionStatistics = () => {
  const stats = {
    "1级高血压": 0,
    "2级高血压": 0,
    "3级高血压": 0
  };
  
  patientList.forEach(patient => {
    const level = patient.hypertensionLevel;
    if (stats.hasOwnProperty(level)) {
      stats[level as keyof typeof stats]++;
    }
  });
  
  return {
    category: ["1级高血压", "2级高血压", "3级高血压"],
    hypertensionData: [
      stats["1级高血压"],
      stats["2级高血压"],
      stats["3级高血压"]
    ]
  };
};

const getData = () => {
  try {
    const stats = hypertensionStatistics();
    console.log("高血压分级统计", stats);
    
    // 设置图表选项
    setOption(stats);
    
  } catch (err) {
    console.error("加载患者数据失败:", err);
    ElMessage.error("加载患者数据失败");
  }
};

const setOption = (data: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
      formatter: function (params: any) {
        var result = params[0].name + "<br>";
        params.forEach(function (item: any) {
          if (item.value) {
            result += item.marker + " " + item.seriesName + " : " + item.value + "人</br>";
          } else {
            result += item.marker + " " + item.seriesName + " :  - </br>";
          }
        });
        return result;
      },
    },
    title: {
      text: "高血压分级分布",
      textStyle: {
        color: "#B4B4B4",
        fontSize: 16,
        fontWeight: "bold"
      },
      left: "center",
      top: "10px"
    },
    grid: {
      left: "60px",
      right: "40px",
      bottom: "30px",
      top: "60px",
    },
    xAxis: {
      data: data.category,
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#B4B4B4",
        fontSize: 12,
        interval: 0
      }
    },
    yAxis: {
      type: "value",
      name: "人数",
      nameTextStyle: {
        color: "#B4B4B4"
      },
      splitLine: {
        lineStyle: {
          color: "rgba(180, 180, 180, 0.3)",
          type: "dashed"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisLabel: {
        color: "#B4B4B4",
        formatter: "{value}"
      },
    },
    series: [
      {
        name: "患者人数",
        type: "bar",
        barWidth: 40,
        // 根据高血压分级设置不同颜色
        itemStyle: {
          borderRadius: 5,
          color: function(params: any) {
            const colors = [
              new graphic.LinearGradient(0, 0, 0, 1, [ // 1级高血压 - 黄色
                { offset: 0, color: "#FAAD14" },
                { offset: 1, color: "#FFD666" }
              ]),
              new graphic.LinearGradient(0, 0, 0, 1, [ // 2级高血压 - 橙色
                { offset: 0, color: "#FA8C16" },
                { offset: 1, color: "#FFC069" }
              ]),
              new graphic.LinearGradient(0, 0, 0, 1, [ // 3级高血压 - 红色
                { offset: 0, color: "#F5222D" },
                { offset: 1, color: "#FF7875" }
              ])
            ];
            return colors[params.dataIndex] || colors[0];
          }
        },
        label: {
          show: true,
          position: "top",
          color: "#FFF",
          fontWeight: "bold",
          formatter: "{c}人"
        },
        data: data.hypertensionData
      }
    ]
  };
};

onMounted(() => {
  getData();
});
</script>

<template>
  <div class="chart-container">
    <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
  </div>
</template>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart {
  flex: 1;
  width: 100%;
}
</style>